<template>
  <div
    v-if="visible"
    class="menu-content-attribute-relation-delete"
    style=""
    :style="{
      top: y + 'px',
      left: x + 'px',
    }"
    @click.stop="onClick"
  >
    <div class="item">编辑</div>
    <div class="item">
      <a-spin :spinning="loading">删除</a-spin>
    </div>
  </div>
</template>
<script setup>
import { useVModel } from '@vueuse/core'
/**
 * 外部参数
 */
let props = defineProps({
  x: { type: Number, default: () => 0 },
  y: { type: Number, default: () => 0 },
  visible: { type: Boolean, default: () => false },
  loading: { type: Boolean, default: () => false },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:visible', 'confirm'])
/**
 * 双向绑定
 */
let visible = useVModel(props, 'visible', emit)
function onClick() {
  // visible.value = false
  emit('confirm')
}
</script>
<style lang="less" scoped>
.menu-content-attribute-relation-delete {
  position: fixed;
  z-index: 1000;
  cursor: pointer;
  padding: 4px 0;
  background-color: #fff;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.05);
  font-size: 14px;
  line-height: 30px;
  .item {
    padding: 0 8px;
    &:hover {
      background: #ededed;
    }
  }
}
</style>
